<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-html|v-model|v-cloak</title>
    <script src="vue.js"></script>
    <script src="index2.js"></script>
    <script>
    /***
        {{v}} 存在页面闪烁bug，解决方式：
            1.添加  v-cloak
            2.添加  style 样式: [v-cloak {display:none}]
         v-model 实现view同步,表单的值
    */
    </script>
<style>
[v-cloak]{
    display: none;
}
ul li{
    padding: 0px;
}
.tab-title .active{
    color: #09f;

}
</style>

</head>
<body>
    <div id="my">

        <!-- 静态Tab切换-->
        <p>静态Tab切换</p>
        <ul class="tab-title">
            <li @click="cur=0" :class="{active:cur==0}">Title1</li>
            <li @click="cur=1" :class="{active:cur==1}">Title2</li>
            <li @click="cur=2" :class="{active:cur==2}">Title3</li>
        </ul>
        <div class="tab-content">
            <div v-show="cur==0">content1</div>
            <div v-show="cur==1">content2</div>
            <div v-show="cur==2">content3</div>
        </div>
        <hr>

        <!--动态数据Tab切换-->
        <p>动态数据Tab切换</p>
        <ul class="tab-title">
            <li v-for="(t,index) in tabTitle" @click="cur=index" :class="{active:cur==index}">{{t}}</li>
        </ul>
        <div class="tab-content">
            <div v-for="(v,index) in tabContent" v-show="cur==index">{{v}}</div>
        </div>
        <hr>

        <!-- v-html,v-text -->
        <p>v-html,v-text示例</p>
        <div v-html="html"></div>
        <div v-text="msg"></div>
        <hr>

        <!--v-cloak避免闪烁大括号,注意必须设置style-->
        <p>v-cloak避免闪烁大括号,注意必须设置style</p>
        <div v-cloak>{{msg}}</div>
        <hr>

        <!--输入a时候禁用-->
        <p>输入a时候禁用</p>
        <input type="text" v-model="value" :disabled="value=='a'" />{{value}}
        <hr>

        <!-- 复选框  单个-->
        <p>复选框  单个</p>
        <input type="checkbox" v-model="che"  value="true" />item0{{che}}<br>
        
        <!-- 复选框  多个-->
        <p>复选框  多个</p>
        <input type="checkbox" v-model="arr"  value="0" />item1
        <input type="checkbox" v-model="arr"  value="1" />item2
        <input type="checkbox" v-model="arr"  value="2" />item3
        {{arr}}
        <hr>

        <!-- 单选框 -->
        <p>单选框</p>
        <div>
            <input type="radio" v-model="radioT" name="gender"  value="0" />男
            <input type="radio" v-model="radioT" name="gender"  value="1" />女
            {{radioT}}
        </div>
        <hr>

        <!-- 下拉框 -->
        <p>下拉框</p>
        <div>
           <select v-model="selected">
               <option v-for="v in items" :value="v.value">{{v.text}}</option>
           </select>
           {{selected}}
        </div>

    </div>
</body>
</html>